import UserDetail from "@user/pay/userDetail";
import {
  defaultDrawerColumns,
  defaultDrawerDataSource,
  defaultOrderType,
  defaultUserDetailLoading,
  drawer_disable_ok_button,
  drawerFormState,
  drawerInstance,
  drawerTitle,
  drawerVisible,
  orderStatusMap,
  tableActiveKey,
} from "./store";
import { colorOptions, orderStatusOptions } from "@user/pay/store";
import { tableLoading } from "./table";
const eventObject = {
  cancel: () =>
    defaultDrawerDataSource.map((item) => ((item.length = 0), item)),
};
export const drawerConfig = () => {
  const defineDrawer = {
    width: "800px",
    drawerInstance,
    loading: ref(false),
    visible: drawerVisible,
    title: drawerTitle,
    maskClosable: true,
    formState: drawerFormState,
    disable_ok_button: drawer_disable_ok_button,
    event: eventObject,
    slot: {
      extra_form_item: () => {
        return tableActiveKey.value === 1 ||
          (tableActiveKey.value === 0 && [4].includes(defaultOrderType[0])) ? (
          <>
            <s-title>{$t("tradeDetail2")}</s-title>
            <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
              <a-col span={8}>
                {$t("tradeDetail3")}：{drawerFormState.order_number}
              </a-col>
              {tableActiveKey.value === 0 &&
                [4].includes(defaultOrderType[0]) && (
                  <a-col span={8}>
                    {$t("tradeDetail4")}：
                    {drawerFormState.withdrawal_order_number}
                  </a-col>
                )}
              <a-col span={8}>
                {$t("tradeDetail5")}：{drawerFormState.order_type}
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
              <a-col span={8}>
                {$t("tradeDetail6")}： {drawerFormState.status}
              </a-col>
              <a-col span={8}>
                {$t("tradeDetail7")}：
                {getTimeByZone(drawerFormState.withdraw_time)}
              </a-col>
              <a-col span={8}>
                {$t("tradeDetail8")}：
                {getTimeByZone(drawerFormState.arrival_time)}
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
              <a-col span={8}>
                {$t("tradeDetail9")}： {drawerFormState.origin_type}
              </a-col>
              <a-col span={8}>
                {$t("tradeDetail10")}：
                <a-spin spinning={defaultUserDetailLoading[0].value}>
                  <UserDetail
                    spinning={defaultUserDetailLoading[0]}
                    record={computed(() => {
                      return !isEmptyType(drawerFormState?.user_info)
                        ? {
                            avatar: drawerFormState?.user_info?.avatar,
                            nickname: drawerFormState?.user_info?.nickname,
                            uid: drawerFormState?.user_info?.uid,
                            sex: drawerFormState?.user_info?.sex,
                          }
                        : {};
                    })}
                  />
                </a-spin>
              </a-col>
              <a-col span={8}>
                {$t("table216")}：{drawerFormState.phone_number}
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
              <a-col span={8}>
                {$t("tradeDetail12")}：{drawerFormState.token_address}
              </a-col>
            </a-row>
            <s-title>{$t("tradeDetail13")}</s-title>
            <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
              <a-col span={8}>
                {$t("tradeDetail14")}：{drawerFormState.third_order_number}
              </a-col>
              <a-col span={8}>
                {$t("tradeDetail15")}：{drawerFormState.pay_platform}
              </a-col>
              <a-col span={8}>
                {$t("tradeDetail16")}(USDT)：{drawerFormState.withdraw_amount}
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
              <a-col span={8}>
                {$t("tradeDetail17")}(USDT)：{drawerFormState.arrival_amount}
              </a-col>
              <a-col span={8}>
                {$t("tradeDetail18")}(USDT)：{drawerFormState.handling_fee}
              </a-col>
              <a-col span={8}>
                {$t("tradeDetail19")}(USDT)：{drawerFormState.third_fee}
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row ml8">
              <a-col span={24}>
                <s-table
                  scroll={{
                    x: "auto",
                    y: 350,
                  }}
                  pagination={false}
                  bordered={true}
                  columns={defaultDrawerColumns[3]}
                  dataSource={defaultDrawerDataSource[3]}
                  onChange={(paging: {
                    current: number;
                    pageSize: number;
                  }) => {}}
                  tableSlot={{
                    bodyCell: ({ value, text, index, column, record }: any) => {
                      switch (column?.key) {
                        case "auditor":
                          return renderUserInfo({
                            record: {
                              ...value,
                              nickname: value?.username,
                              uid: value?.id,
                            },
                            tableLoading,
                            is_enable_click: false,
                          });
                      }
                    },
                  }}
                />
              </a-col>
            </a-row>
          </>
        ) : (
          <>
            <s-title>{$t("tradeDetail20")}</s-title>
            <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
              <a-col span={8}>
                {$t("tradeDetail3")}：{drawerFormState.order_number}
              </a-col>
              <a-col span={8}>
                {$t("tradeDetail5")}：{drawerFormState.order_type}
              </a-col>
              <a-col span={8}>
                {$t("tradeDetail6")}：
                {selectDictLabel(
                  orderStatusMap.value,
                  drawerFormState.order_status
                )}
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
              <a-col span={8}>
                {$t("tradeDetail7")}：
                {getTimeByZone(drawerFormState.create_time)}
              </a-col>
              {defaultOrderType[1].includes(defaultOrderType[0]) ||
              defaultOrderType[3].includes(defaultOrderType[0]) ? (
                <a-col span={8}>
                  {$t("tradeDetail21")}：
                  {getTimeByZone(drawerFormState.pay_time)}
                </a-col>
              ) : defaultOrderType[2].includes(defaultOrderType[0]) ? (
                <a-col span={8}>
                  {$t("tradeDetail22")}：
                  {getTimeByZone(drawerFormState.pay_time)}
                </a-col>
              ) : null}

              <a-col span={8}>
                {$t("tradeDetail9")}：{drawerFormState.origin_type}
              </a-col>
            </a-row>

            {defaultOrderType[1].includes(defaultOrderType[0]) ||
            defaultOrderType[3].includes(defaultOrderType[0]) ? (
              <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
                <a-col span={8}>
                  {$t("table13")}：{drawerFormState.channel_name}
                </a-col>
              </a-row>
            ) : null}

            <s-title>{$t("tradeDetail24")}</s-title>
            {defaultOrderType[1].includes(defaultOrderType[0]) ||
            defaultOrderType[3].includes(defaultOrderType[0]) ? (
              <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
                <a-col span={8}>
                  {$t("tradeDetail25")}：{drawerFormState.third_order_number}
                </a-col>
                <a-col span={8}>
                  {$t("tradeDetail26")}：{drawerFormState.pay_type}
                </a-col>
              </a-row>
            ) : (
              <>
                <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
                  <a-col span={8}>
                    {$t("tradeDetail14")}：{drawerFormState.third_order_number}
                  </a-col>
                  <a-col span={8}>
                    {$t("tradeDetail26")}：{drawerFormState.pay_type}
                  </a-col>
                  <a-col span={8}>
                    <div
                      data-icon-width="14px"
                      class="s-table-header_cell"
                      style="column-gap: 5px"
                    >
                      <tips-cell content={$t("recharge65")} />
                      <i>
                        {$t("tradeDetail27")}： {drawerFormState.pay_platform}
                      </i>
                    </div>
                  </a-col>
                </a-row>

                <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
                  <a-col span={8}>
                    {$t("tradeDetail28")}(USDT)：{drawerFormState.amount}
                  </a-col>
                  <a-col span={8}>
                    {$t("tradeDetail29")}：{drawerFormState.actual_amount}
                  </a-col>
                </a-row>
              </>
            )}
            {defaultOrderType[1].includes(defaultOrderType[0]) ||
            defaultOrderType[2].includes(defaultOrderType[0]) ? (
              <s-title>{$t("tradeDetail30")}</s-title>
            ) : (
              <s-title>{$t("tradeDetail31")}</s-title>
            )}
            {defaultOrderType[1].includes(defaultOrderType[0]) ||
            defaultOrderType[2].includes(defaultOrderType[0]) ? (
              <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
                <a-col span={8}>
                  {$t("tradeDetail32")}：
                  <a-spin spinning={defaultUserDetailLoading[1].value}>
                    <UserDetail
                      spinning={defaultUserDetailLoading[1]}
                      record={computed(() => {
                        return !isEmptyType(drawerFormState?.user_info)
                          ? {
                              avatar: drawerFormState?.user_info?.avatar,
                              nickname: drawerFormState?.user_info?.nickname,
                              uid: drawerFormState?.user_info?.uid,
                              sex: drawerFormState?.user_info?.sex,
                            }
                          : {};
                      })}
                    />
                  </a-spin>
                </a-col>
                {defaultOrderType[1].includes(defaultOrderType[0]) ? (
                  <a-col span={8}>
                    {$t("table2")}：{drawerFormState.phone_number}
                  </a-col>
                ) : defaultOrderType[2].includes(defaultOrderType[0]) ? (
                  <a-col span={8}>
                    {$t("table216")}：{drawerFormState.phone_number}
                  </a-col>
                ) : null}
              </a-row>
            ) : (
              <>
                <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
                  <a-col span={8}>
                    {$t("tradeDetail11")}({$t("table0")})：
                    <a-spin spinning={defaultUserDetailLoading[2].value}>
                      <UserDetail
                        spinning={defaultUserDetailLoading[2]}
                        record={computed(() => {
                          return !isEmptyType(
                            drawerFormState?.contract_info?.sign_user_info
                          )
                            ? {
                                avatar:
                                  drawerFormState.contract_info.sign_user_info
                                    ?.avatar,
                                nickname:
                                  drawerFormState.contract_info.sign_user_info
                                    ?.nickname,
                                uid: drawerFormState.contract_info
                                  .sign_user_info?.uid,
                                sex: drawerFormState.contract_info
                                  .sign_user_info?.sex,
                              }
                            : {};
                        })}
                      />
                    </a-spin>
                  </a-col>
                  <a-col span={8}>
                    {$t("tradeDetail23")}({$t("table0")})：
                    {drawerFormState.contract_info.sign_user_phone_number}
                  </a-col>
                  <a-col span={8}>
                    {$t("tradeDetail33")}：
                    <a-spin spinning={defaultUserDetailLoading[3].value}>
                      <UserDetail
                        spinning={defaultUserDetailLoading[3]}
                        record={computed(() => {
                          return !isEmptyType(
                            drawerFormState?.contract_info?.send_user_info
                          )
                            ? {
                                avatar:
                                  drawerFormState.contract_info.send_user_info
                                    ?.avatar,
                                nickname:
                                  drawerFormState.contract_info.send_user_info
                                    ?.nickname,
                                uid: drawerFormState.contract_info
                                  .send_user_info?.uid,
                                sex: drawerFormState.contract_info
                                  .send_user_info?.sex,
                              }
                            : {};
                        })}
                      />
                    </a-spin>
                  </a-col>
                </a-row>
                <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
                  <a-col span={8}>
                    {$t("tradeDetail34")}：
                    {drawerFormState?.contract_info?.start_time}
                  </a-col>
                  <a-col span={8}>
                    {$t("tradeDetail35")}：
                    <a
                      href={drawerFormState?.contract_info?.contract_pdf}
                      target="_blank"
                    >
                      {drawerFormState?.contract_info?.name}
                    </a>
                  </a-col>
                  <a-col span={8}>
                    {$t("tradeDetail36")}：
                    <a
                      href={drawerFormState?.contract_info?.attachment_file}
                      target="_blank"
                    >
                      {!isEmptyType(
                        drawerFormState?.contract_info?.attachment_file
                      )
                        ? drawerFormState?.contract_info?.attachment_file.substring(
                            drawerFormState?.contract_info?.attachment_file.lastIndexOf(
                              "/"
                            ) + 1
                          )
                        : undefined}
                    </a>
                  </a-col>
                </a-row>
              </>
            )}

            <a-row class="s-drawer-extra-row ml8">
              <a-col span={24}>
                <s-table
                  scroll={{
                    x: defaultOrderType[3].includes(defaultOrderType[0])
                      ? 1000
                      : "auto",
                    y: 350,
                  }}
                  pagination={false}
                  bordered={true}
                  columns={
                    defaultOrderType[1].includes(defaultOrderType[0])
                      ? defaultDrawerColumns[0]
                      : defaultOrderType[2].includes(defaultOrderType[0])
                      ? defaultDrawerColumns[1]
                      : defaultDrawerColumns[2]
                  }
                  dataSource={
                    defaultOrderType[1].includes(defaultOrderType[0])
                      ? defaultDrawerDataSource[0]
                      : defaultOrderType[2].includes(defaultOrderType[0])
                      ? defaultDrawerDataSource[1]
                      : defaultDrawerDataSource[2]
                  }
                  onChange={(paging: {
                    current: number;
                    pageSize: number;
                  }) => {}}
                  tableSlot={{
                    bodyCell: ({ value, text, index, column, record }: any) => {
                      if (defaultOrderType[1].includes(defaultOrderType[0])) {
                        switch (column.key) {
                          case "level":
                            return (
                              <div class="s-table-body_cell">
                                {!isEmptyType(value) ? "LV" + value : null}
                              </div>
                            );

                          case "status":
                            return (
                              <div class="s-table-body_cell">
                                <i class={colorOptions[record.status]}>
                                  {selectDictLabel(
                                    orderStatusOptions,
                                    record.status
                                  )}
                                </i>
                              </div>
                            );
                        }
                      }
                    },
                  }}
                />
              </a-col>
            </a-row>
          </>
        );
      },
      extra: () => {
        const { loading } = defineDrawer;
        return (
          <a-space size={8}>
            <s-button
              icon={renderIcon("icon-tubiao_tijiao")}
              loading={loading.value}
              type="primary"
              onClick={async () => {
                drawerVisible.value = false;
                eventObject.cancel();
              }}
            >
              {$t("base.ok")}
            </s-button>
          </a-space>
        );
      },
    },
  };
  return defineDrawer;
};
